<template>
  <el-form size="mini" ref="formData" :model="formData" inline>
    <el-form-item prop="categoryName" label="名称">
      <el-input
        v-model="formData.categoryName"
        clearable
        size="mini"
        placeholder="请输入品类名称"
        @keyup.enter.native="handleSerach"
      />
    </el-form-item>
    <el-form-item prop="categoryName" label="编码">
      <el-input
        v-model="formData.categoryNo"
        clearable
        size="mini"
        placeholder="请输入品类编码"
        @keyup.enter.native="handleSerach"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" size="mini" @click="handleSerach">查询</el-button>
    </el-form-item>
  </el-form>
</template>
<script>
export default {
  data () {
    return {
      formData: {
        categoryName: '', // 品类名称
        categoryNo: '', // 品类编码
      },
    }
  },
  methods: {
    // 查询
    handleSerach () {
      if (this.validateForm()) return
      this.$emit('search', this.formData)
    },
    // 清空
    clearForm () {
      this.formData = {
        categoryName: '', // 品类名称
        categoryNo: '', // 品类编码
      }
    },
    // 校验表单为空
    validateForm () {
      if (!this.formData.categoryName && !this.formData.categoryNo) {
        return this.$message.warning('请输入品类名称或品类编码')
      }
    },
  }
}
</script>
